<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>vue</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
</head>

<body>
    <div id='app'>
        <div style="background: yellowgreen;">根组件标题(父传子通信)</div>

        <!-- <navbar title="电影" flag="true"></navbar> -->
        <!-- 加上冒号，变成属性绑定，就是 js 地盘，否则当作字符串传值 -->
        <navbar title="电影" :flag="true"></navbar>
        <navbar title="影院" :flag="false"></navbar>
        <navbar title="资讯" :hero="hero"></navbar>

        <navbar></navbar>
    </div>
</body>
<script>
    Vue.component("navbar", {
        // 通过属性(对象解构),接收父传子的
        // props: ["title", "flag"],
        // 默认属性和校验
        props: {
            title: {
                type: String,
                default: "默认值"
            },
            flag: {
                type: Boolean,                                    
                default: true
            },
            hero: {
                type: String,
                default: ""
            }
        },
        template: `
                <div>
                    <button v-show="!flag">left</button>
                    <span>{{title}}--{{hero}}</span>
                    <button v-show="flag">right</button>
                </div>
            `
    });

    let vm = new Vue({
        el: '#app',
        data: {
            hero: '剑圣'
        }
    });
</script>

</html>